<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 600px;" @markertap="labeltap" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
			<view class="footer">
				<view class="area">
					<uni-section title="服务区域" type="line" padding style="height: calc(100vh - 100px);">
						<uni-data-picker :map="map" placeholder="请选择服务区域" popup-title="请选择所在地区" :localdata="dataTree"
							v-model="classes" @change="onchange">
						</uni-data-picker>
					</uni-section>
				</view>
				<button style="background-color: red;color: white;margin-top: 20px;" @click="select">师傅查询</button>
			</view>
		</view>
	</view>
</template>
<script>
	import provinceData from '@/utils/area.js'
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				clusterId: 1, //自定义点聚合簇效果时使用
				latitude: 39.909,
				longitude: 116.39742,
				covers: [],
				address:'',
				// covers: [{
				// 	id: 0,
				// 	latitude: 27.23285,
				// 	longitude: 111.49674,
				// 	alpha: 0,
				// 	callout: {
				// 		content: '服务次数：0',
				// 		borderWidth: 20,
				// 		// fontSize: 18,
				// 		// color: "#FFFFFF",
				// 		// bgColor: "#98F5FF",
				// 		display: 'ALWAYS',
				// 		borderRadius: 10,
				// 		anchorX: 50,
				// 		anchorY: 60,
				// 	},
				// 	label: {
				// 		borderWidth: 1,
				// 		content: '小帅',
				// 		borderColor: '#8DEEEE',
				// 		padding: 20,
				// 		color: "#FFFFFF",
				// 		bgColor: '#8DEEEE',
				// 		borderRadius: 100
				// 	}
				// }, ],

				//服务区域
				classes: '',
				dataTree: provinceData.data,
				// 字段映射
				map: {
					text: 'name',
					value: 'name'
				}

			}
		},

		onLoad() {
			this.getAllWork();

			var that = this;
			uni.getLocation({
				type: 'wgs84',
				geocode: true, //设置该参数为true可直接获取经纬度及城市信息
				success: function(res) {
					console.log("位置：", res)
					that.latitude = res.latitude;
					that.longitude = res.longitude;
				},
				fail: function() {
					uni.showToast({
						title: '获取地址失败，将导致部分功能不可用',
						icon: 'none'
					});
				}
			});
		},
		methods: {
			select(){
				//腾讯获取地理位置'重庆市江北区'
				// uni.request({
				// 	url: "https://apis.map.qq.com/ws/geocoder/v1/?location="+this.latitude+","+this.longitude+"&key=ZBABZ-ZWECU-UQTVV-4LYDR-COK3F-5SF75",
				// 		success: (res) => {
				// 		console.log("地理位置" ,res)
				// 	},
				// 		fail(err) {
				// 		console.log(err)
				// 	}
				// });
				
				//腾讯地图 详细地址 获取坐标经纬度
				//key需要去腾讯地图官方控制台获取
				uni.request({
					url: `https://apis.map.qq.com/ws/geocoder/v1/?address=${this.address}&key=ZBABZ-ZWECU-UQTVV-4LYDR-COK3F-5SF75`,
						success: (res) => {
						console.log("地理编码" ,res)
						this.latitude = res.data.result.location.lat;
						this.longitude = res.data.result.location.lng;
						console.log("latitude",this.latitude);
					},
						fail(err) {
						console.log(err)
					}
				});

			},
			
			onchange(e) {
				console.log('onchange:', e);
				let arr = e.detail.value;
				this.address = arr[0].value + arr[1].value + arr[2].value;

				

			},

			// 获取所有的师傅信息
			getAllWork() {
				this.$Request.get("/app/user/getAllWork").then(res => {
					console.log("数据", res.data);
					if (res.code == 0) {
						this.covers = res.data;
					}
				})
			},
			
			// 点击师傅
			labeltap(e){
				console.log("师傅",e.detail);
				uni.navigateTo({
					url:'/package/pages/shop/sfdetail?sfUserId=' + e.detail.markerId
				})
			}
		}
	}
</script>